<script setup>
// #region 引入包, 函数和组件
import { ref, onMounted } from "vue";
import Swiper from "swiper/bundle";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps(["showSwiper", "list", "initIndex"]);
const emits = defineEmits(["update:showSwiper"]);
// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
onMounted(() => {
  // console.log(props.initIndex)
  const swiper = new Swiper(".swiper", {
    initialSlide: props.initIndex,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      type: "fraction",
    },
  });
});
// #endregion
</script>

<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(img, index) in list" :key="index">
        <img :src="img" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <div class="cancel" @click="emits('update:showSwiper', false)">&times;</div>
  </div>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 100%;
  background: #000;
  position: fixed;
  inset: 0;
  z-index: 7;
}

.swiper-slide {
  display: flex;
  overflow: hidden;
}

.swiper-pagination {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  height: 0.45rem;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 0.17rem;
  z-index: 3;
}

img {
  width: 100%;
  margin: auto;
}

.cancel {
  color: #ccc;
  font-size: 0.45rem;
  position: absolute;
  top: -0.1rem;
  left: 0.1rem;
  z-index: 4;
}
</style>
